import React from 'react';

import './Caculator.scss';

const STEP ={
  NUM_1 : 0,
  NUM_2 : 2,
}

const BTN_TYPE = {
  CTRL : 'ctrl',
  EXP : 'exp',
  NUMBER : 'num', 
}

const EXP = {
  PLUS: '+',
  MINUS: '-',
  MULTIPLY: '×',
  DEVIDE: '÷',
}

const CTRL = {
  CLEAR: 'C',
  NEGATIVE: '+/-',
  PERCENT: '%',
};

const NumberBtn = props => {
  return(
    <a className={`block block--num ${className}`} onClick={() => props.onClick(props.num)}>{props.num}</a>
  )
}

NumberBtn.defaultProps = {
  className : ''
}

const ExpBtn = props => {
  return (
    <a className="block block--exp" onClick={() => props.onClick(props.type)}>{props.type}</a>
  )
}

const CtrlBtn = props => {
  return (
    <a className="block block--ctrl" onClick={()=> props.onClick(props.type)}>{props.type}</a>
  )
}

const CommonBtn = props => {
  const {type,className,value} = props
  return (
    <a
      className={`block block--${type} ${className}`}
      onClick={() => props.onClick(type, value)}
    >
      {value}
    </a>
  )
}

CommonBtn.defaultProps ={
  className: ''
}
  




class Caculator extends React.Component {  
  
  state = this.getInitialState()


  onBtnClick = (type,value) =>{
    if(type === BTN_TYPE.NUMBER){
      this.onChangeNum(value)
      return
    }

    if(type === BTN_TYPE.EXP){
      this.onChangeExp(value)
      return
    }
  }

  onCtrl = (type) => {
    if(type === CTRL.CLEAR){
      this.onClear()
      return
    }
    if(type === CTRL.NEGATIVE){
      this.onNegative()
      return
    }
    if(type === CTRL.PERCENT){
      this.onPercent()
      return
    }
  }

  setCurrentStepNumber = (number) => {
    const { step } = this.state;
    this.setState({ [step === STEP.NUM_1 ? 'num1' : 'num2']: number });
  };

  getCurrentStepNumber() {
    const {step,num1,num2} = this.state
    return step === STEP.NUM_1 ? num1 : num2
  }

  onChangeNum = async num =>{
    let number = this.getCurrentStepNumber()
    // 开头不能输入多个0
    if(number === '0' && num === 0){
      return 
    }
    // 不能输入多个.
    else if(num === '.'  && number.indexOf('.') !== -1 ){
      return 
    }
     // 保证第一个数不为0
    else if(number === '0' && num !==0 && num !== '.'){
      number = String(num);
    }
     // 人性化输入.
    else if(number === '' && num === '.'){
      number = '0.'
    }
    // 正常输入的情况
    else{
      number = `${number}${num}`
    }
    // if(this.state.step === STEP.NUM_1){
    //   this.setState({num1 : number})
    // }else{
    //   this.setState({num2 : number})
    // }
    this.setCurrentStepNumber(number)
  }

  getInitialState(){
    return {
      num1 : '0',
      exp : '',
      num2 : '',
      step : STEP.NUM_1
    }
  }

  onClear =  () =>{
    return new Promise(resolve => {
      this.setState(this.getInitialState(),resolve)
    })
  }

  onNegative = () =>{
    let number = this.getCurrentStepNumber()
    if(number[0] === '-'){
      number = number.substring(1)
    }else{
      number = `-${number}`
    }
    this.setCurrentStepNumber(number);
  }

  onPercent = () => {
    let number = this.getCurrentStepNumber();
    number = number / 100;
    this.setCurrentStepNumber(number);
  };

  onChangeExp = exp =>{
    this.setState({exp, step : STEP.NUM_2}) 
  }

  onGetResult = () =>{
    let {exp, num2} = this.state
    let {num1} = this.state
    if(num2 === ''){
      num2 = num1
    }
    switch(exp){
      case '+':
        num1 = String(Number(num1) + Number(num2))
        break
      case '-':
        num1 = String(Number(num1) - Number(num2))
        break
      case '×':
        num1 = String(Number(num1) * Number(num2))
        break
      case '÷':
        num1 = String(Number(num1) / Number(num2))
        break
      default :
      //;
    }
    this.setState({
      ...this.getInitialState(),
      num1:num1})
  }

 



  render() {
    const { num1,num2} = this.state;
    let number = this.getCurrentStepNumber();
    if(num2 === '' && STEP.NUM_2){
      number = num1
    }
    // if(result !== ''){
    //   number = result
    // }

    return (
      <>
      <div className="caculator">
        <div className="result-table">{number}</div>
        <div className="operation-table" >
          <CtrlBtn type={CTRL.CLEAR} onClick={this.onCtrl}/>
          <CtrlBtn type={CTRL.NEGATIVE} onClick={this.onCtrl}/>
          <CtrlBtn type={CTRL.PERCENT} onClick={this.onCtrl}/>
          <CommonBtn type={BTN_TYPE.EXP} value ={EXP.DEVIDE} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.NUMBER} value ={7} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.NUMBER} value ={8} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.NUMBER} value ={9} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.EXP} value ={EXP.MULTIPLY} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.NUMBER} value ={4} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.NUMBER} value ={5} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.NUMBER} value ={6} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.EXP} value ={EXP.MINUS} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.NUMBER} value ={1} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.NUMBER} value ={2} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.NUMBER} value ={3} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.EXP} value ={EXP.PLUS} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.NUMBER} className="block--double" value ={0} onClick={this.onBtnClick}/>
          <CommonBtn type={BTN_TYPE.NUMBER} value ='.' onClick={this.onBtnClick}/>
          <a className="block block--exp" onClick={() => this.onGetResult()}>=</a>
        </div>
      </div>
      {JSON.stringify(this.state)}
      </>
    );
  }
}

export default Caculator;
